<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>锚点定位</title>

    <link rel="stylesheet" href="../../styles/scss/02-anchor.css" />
  </head>
  <body>
    <!--https://www.cnblogs.com/coco1s/p/18739625-->
    <div>
      <div class="btn-a">压索</div>
      <div class="btn-b">盖伦</div>
      <div class="anchor">金克斯</div>
    </div>

    <div class="g-container">
      <div class="g-use-anchor"></div>
      <div class="g-anchor-element"></div>
    </div>
    <p class="text-wrap">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod, porro,
      <span>facere</span>, et incidunt error aliquam fugit pariatur eos labore
      ipsum voluptate magni culpa reiciendis optio at accusantium non! Quis,
      laboriosam. Lorem ipsum dolor sit,
      <span>amet consectetur</span> adipisicing elit. Error commodi sequi
      perspiciatis ipsa veniam, aut, aliquam maiores quasi
      <span>adipisci tenetur </span>reiciendis dolor nihil aperiam labore, sunt
      qui ullam aspernatur <span>voluptate</span>.
    </p>

    <div class="g-container">
      <ul class="for">
        <li>下</li>
        <li>划</li>
        <li>线</li>
        <li>跟</li>
        <li>随</li>
        <li>动</li>
        <li>画</li>
      </ul>
    </div>

    <div class="position-try-fallbacks">
      <div class="btn">Reference</div>
      <div class="popover">Popover弹窗元素</div>
    </div>
  </body>
</html>
